<template>
    <div style="height:100%;width:100%" ref="echarts"></div>
</template>

<script>
    import mapRegisterData from "../../../assets/fxxz"
    import echarts from "echarts";
    import "echarts-gl";

    echarts.registerMap("fxxz", mapRegisterData);
    export default {
        data() {
            return {
                echatsDOm: null
            };
        },
        props: {
            mychange: {},
            chatsOption: {
                type: Object,
                default() {
                    return {
                        xAxis: {
                            type: "category",
                            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
                        },
                        yAxis: {
                            type: "value"
                        },
                        series: [
                            {
                                data: [820, 932, 901, 934, 1290, 1330, 1320],
                                type: "line"
                            }
                        ]
                    };
                }
            }
        },
        watch: {
            chatsOption: {
                deep: true,
                immediate: true,
                handler() {
                    if (this.echatsDOm) {
                        this.echatsDOm.dispose();
                        this.echatsDOm = null;
                        this.echatsDOm = echarts.init(this.$refs.echarts);
                        this.echatsDOm.setOption(this.chatsOption);
                    }

                }
            }
        },
        mounted() {
            this.$nextTick(() => {
                this.echatsDOm = echarts.init(this.$refs.echarts);
                this.echatsDOm.setOption(this.chatsOption);

                this.echatsDOm.on("click", (e) => {
                    // console.log(e)
                    if (e.componentSubType == "map3D") {
                        this.$store.commit("changeMapTip", true)
                    }

                })
            });
            window.addEventListener("resize", () => {
                this.echatsDOm && this.echatsDOm.resize();
            });
        },
        beforeDestroy() {
            this.echatsDOm.dispose();
            this.echatsDOm = null;
        }
    };
</script>
